<template>
  <div class="news_content">
    <div class="Image">
      <!-- <img src="../assets/顶部背景.png" alt="" /> -->
      <div class="Image2"></div>
      <div class="FontSize">
        <div class="left_font">Hi, 欢迎使用校友内推管理平台!</div>
        <!-- <div class="left_bottom_font"> 
          轻松创建、部署和管理你的店铺，提升效率，降低成本。
        </div> -->
      </div>
    </div>
    <div class="zongti">
      <div class="FLEX">
        <a-card style="display: flex; margin-bottom: 16px">
          <div class="Left">
            <div>职位总数</div>
            <span>{{ jobsNum }}</span>
          </div>
          <div class="Right_left">
            <div><span class="ruidus"></span> 今日审批量</div>
            <span>{{ todayApproval }}</span>
          </div>
          <div class="Right_center">
            <div><span class="ruidus2"></span>已发布职位数</div>
            <span>{{ passedNum }}</span>
          </div>
          <div class="Right_right">
            <div><span class="ruidus3"></span>待发布职位数</div>
            <span>{{ pendingNum }}</span>
          </div>
        </a-card>

        <a-card style="width: 100%; padding-bottom: 80px; position: relative">
          <div class="Center_top">
            <p
              style="
                height: 64px;
                font-weight: bold;
                margin-bottom: 0;
                line-height: 64px;
              "
            >
              待办事项
            </p>
            <div class="Center_center">
              <div class="Center_center2" v-for="item in list" :key="item.id">
                <!-- <div style="border: 1px solid blue;"> -->
                <div class="yuan">{{ item.publishType }}</div>
                <div style="margin-left: 50px">
                  <span class="Span1" v-if="item.requestType == '实习'">{{item.requestType}}</span>
                  <span class="Span1" v-else>{{ item.requestType }}</span>
                  <span class="Span">{{ item.name }}</span>
                   <div style="margin-top:3px">
                  {{ item.companyName }}
                   </div>
                  <div class="Bottom_5">
                    <span class="Bottom_left2">
                      <img
                        src="https://s4.ax1x.com/2022/01/19/7sUKfO.png"
                        style="
                          width: 25px;
                          height: 25px;
                          position: relative;
                          top: -3px;
                        "
                      />
                      {{ item.requestResume }}
                    </span>
                    <span class="Bottom_left2" :title="item.requestCity">
                      <a-icon type="environment" />{{ item.requestCity }}</span
                    >
                    <span class="Bottom_left2">
                      <a-icon type="user" /> {{ item.createdBy }}</span
                    >
                    <span class="Bottom_left2">
                      <a-icon type="history" /> {{ item.createdAt }}</span
                    >
                    <span class="Bottom_left2 salary"  v-if="item.salaryMin == 0 && item.salaryMax ==0">
                     面议
                     </span
                    >
                     <span class="Bottom_left2 salary"  v-else>
                    {{ item.salaryMin }}~{{ item.salaryMax }}万/年 
                     </span
                    >
                  </div>
                  <div class="Center">
                    <p
                      style="
                        margin-bottom: 30px;
                        margin-top: 8px;
                        color: #ff7637;
                        font-wight: 700;
                        font-size: 12px;
                      "
                    >
                      {{ item.approvalStatus }}
                    </p>
                  </div>
                  
                </div>
                <!-- </div> -->
              </div>
              <div class="jump"  @click="Jump_router">查看全部></div>
            </div>
          </div>
        </a-card>

        <div class="gutter-example">
          <a-row :gutter="24">
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[0].percentage"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[0].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[0].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>

                  <div class="percentage">
                    占比{{ categoryStatistics[0].percentage }}%
                  </div>
                </div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[1].percentage"
                  strokeColor="#25c07a"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[1].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[1].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>
                  <div>占比{{ categoryStatistics[1].percentage }}%</div>
                </div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[2].percentage"
                  strokeColor="#f77e62"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[2].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[2].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>
                  <div>占比{{ categoryStatistics[2].percentage }}%</div>
                </div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[3].percentage"
                  strokeColor="#9836b9"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[3].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[3].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>
                  <div>占比{{ categoryStatistics[3].percentage }}%</div>
                </div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[4].percentage"
                  strokeColor="#9836b9"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[4].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[4].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>
                  <div>占比{{ categoryStatistics[4].percentage }}%</div>
                </div>
              </div>
            </a-col>
            <a-col class="gutter-row" :span="4">
              <div class="gutter-box">
                <a-progress
                  type="circle"
                  :percent="categoryStatistics[5].percentage"
                  strokeColor="#9836b9"
                  :width="80"
                  :strokeWidth="10"
                />
                <div>
                  <div class="category">
                    {{ categoryStatistics[5].category }}
                  </div>
                  <div style="display: flex; align-items: flex-end">
                    <div class="num">{{ categoryStatistics[5].num }}</div>
                    <div style="margin-left: 5px">次</div>
                  </div>
                  <div>占比{{ categoryStatistics[5].percentage }}%</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>

        <!-- <a-card style="width: 100%; margin-top: 16px">
          <div style="width: 100%">
            <div class="Chart_top"><p class="Chart">图表数据</p></div>
            <div class="execel">一周收藏总览 <span>近7天</span></div>
            <div id="myChart" :style="{ width: '100%', height: '500px' }"></div>
            <div style="display: flex; width: 100%"></div>
          </div>
        </a-card> -->
        <div style="display: flex">
          <a-card
            style="width: 50%; margin-top: 16px; margin-right: 20px"
            class="Card_2"
          >
            <div class="Width">
              <div class="execel1">职位类型</div>
            </div>
            <div
              id="myChart2"
              :style="{ width: '100%', height: '300px' }"
            ></div>
          </a-card>
          <a-card style="width: 50%; margin-top: 16px" class="Card_2">
            <div class="Width">
              <div class="execel1">职位城市分布</div>
            </div>
            <div
              id="myChart3"
              :style="{ width: '100%', height: '300px' }"
            ></div>
          </a-card>
        </div>
      </div>
      <div class="RIGHT">
        <!-- <img src="../assets/广告位.png" alt="" /> -->

        <a-card style="width: 100%">
          <div style="width: 100%">
            <div style="width: 100%" class="Notice">
              <p>公告</p>
            </div>
            <div class="right_88" style="height: 150px; overflow: auto">
              <div
                style="display: flex; margin-bottom: 8px"
                v-for="item in NoticeList"
                :key="item.id"
                class="right_GG"
              >
                <div class="ellipsis">
                  <span
                    class="Background"
                    :title="item.title"
                    @click="showModal8(item.content)"
                    >{{ item.title }}</span
                  >
                </div>
                <div class="right_GG_8">
                  <span
                    class="Background_88"
                    @click="showModal8(item.content)"
                    >{{ item.createTimeStr }}</span
                  >
                </div>
                <!-- <span class="Add">1周前</span> -->
              </div>
            </div>
          </div>
        </a-card>
        <a-card style="width: 100%; margin-top: 17px">
          <div class="Right_bottom">
            <div class="Notice">
              <p>使用帮助</p>
            </div>
            <div class="right_99" style="height: 150px; overflow: auto">
              <div
                v-for="item in UsingHelpList"
                :key="item.id"
                @click="showModal9(item.content)"
                class="right_888"
              >
                <div>
                  <span class="text_66">{{ item.title }}</span>
                </div>

                <div class="right_99_9">
                  <span>{{ item.createTimeStr }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card style="width: 100%; margin-top: 17px">
          <div class="Right_bottom">
            <div class="Notice">
              <p>其他帮助</p>
            </div>
            <div class="right_99" style="height: 150px; overflow: auto">
              <div
                v-for="item in OtherHelpList"
                :key="item.id"
                @click="showModal10(item.content)"
                class="right_888"
              >
                <div>
                  <span class="text_66">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-card>

        <!-- <a-card style="width: 100%;  margin-top: 17px;height:230px;overflow:auto;">
           <p class="Text">其他帮助</p>
              <div class="Right_bottom_2">
                <div
                  v-for="item in OtherHelpList"
                  :key="item.id"
                  @click="showModal10(item.content)"
                >
                  <span> {{ item.title }}</span>
                  <span></span>
                </div>
              </div>
        </a-card> -->
        <!-- <a-card style="width: 100%; margin-top: 17px" class="card_Height">
          <div class="Text2">
            <p style="font-weight: bold">文件下载</p>

            <div style="overflow: auto; height: 350px">
              <div
                v-for="item in FileDownloadList"
                :key="item.id"
                class="text_pp"
              >
                <a :href="item.filePath" class="path" style="font-size: 14px">{{
                  item.fileName
                }}</a>
              </div>
            </div>
          </div>
        </a-card> -->
      </div>
    </div>
    <a-modal
      v-model="visible"
      width="700px"
      title="详情"
      @ok="handleOk8"
      :footer="null"
    >
      <span v-html="contentModalDetails"></span>
    </a-modal>

    <a-modal
      v-model="visible2"
      width="700px"
      title="详情"
      @ok="handleOk9"
      :footer="null"
    >
      <span v-html="UsingHelpList2"></span>
    </a-modal>

    <a-modal
      v-model="visible3"
      width="700px"
      title="详情"
      @ok="handleOk10"
      :footer="null"
    >
      <span v-html="OtherHelpList2"></span>
    </a-modal>
  </div>
</template>

<script>
import { postAction, deleteAction, getAction } from "../http/manage";
export default {
  name: "zc",
  data() {
    return {
      visible: false,
      visible2: false,
      visible3: false,
      contentModalDetails: "",
      OtherHelpList: "",
      OtherHelpList2: "",
      UsingHelpList: "",
      UsingHelpList2: "",
      FileDownloadList: "",
      id: "",
      list: [], //代办事项
      myChart: [], //工作城市分布
      myChartnum: [],
      chartDom: [], //职位类型
      chartDomnum: [],
      Cake8: [],
      tarket: [],
      NoticeList: [],
      chartDom2: [],
      sonNum: "", //工作城市总数
      // 产品名
      Cake2: [],
      //产品数量
      Cake3: [],
      jobsNum: "", //职位总数
      todayApproval: "", //职位总数
      passedNum: "", //已发布职位数
      pendingNum: "", //待发布职位数
      categoryStatistics: [], //所属行业统计
    };
  },
  mounted() {
    // if (this.$store.state.isLoad) {
    // this.addList();
    // }
    this.getall();
  },
  watch: {
    // "$store.state.isLoad" () {
    //   this.addList();
    // },
  },
  methods: {
    getall() {
      getAction("index/indexAdminData").then((res) => {
        console.log(res.data.data);
        this.jobsNum = res.data.data.jobsNum;
        this.todayApproval = res.data.data.todayApproval;
        this.passedNum = res.data.data.passedNum;
        this.pendingNum = res.data.data.pendingNum;
        this.list = res.data.data.pendingJobs;
        this.categoryStatistics = res.data.data.categoryStatistics;
        let ChartDom = res.data.data.typesStatistics;
        for (let j = 0; j < ChartDom.length; j++) {
          this.chartDom2.push(ChartDom[j]);
          this.chartDom.push(ChartDom[j].type);
          this.chartDomnum.push(ChartDom[j].num);
        }
        //工作城市统计
        this.sonNum = res.data.data.cityNum;
        this.Cake8 = res.data.data.cityStatistics;
        this.Cake2 = res.data.data.cityStatistics;
        for (let k = 0; k < this.Cake2.length; k++) {
          this.tarket.push(this.Cake2[k].requestCity);
          this.Cake2[k]["value"] = this.Cake2[k]["num"];
          this.Cake2[k]["name"] = this.Cake2[k]["requestCity"];
          // this.Cake3[k][""]
          delete this.Cake2[k].goodsTypeNum;
          delete this.Cake2[k].goodsTypeName;
        }
        this.$nextTick(() => {
          this.drawLine();
        });
      });
    },
    //弹框
    handleOk8() {
      this.visible = false;
    },
    handleOk9() {
      this.visible2 = false;
    },
    handleOk10() {
      this.visible3 = false;
    },
    showModal8(content) {
      // console.log(content);
      this.contentModalDetails = content;
      this.visible = true;
      //   for(let n=0;n<this.NoticeList.length;n++){
      //      this.contentModalDetails = this.NoticeList[n].content
      //   }
    },
    showModal9(content) {
      this.visible2 = true;
      this.UsingHelpList2 = content;
      javascript: void 0;
    },
    showModal10(content) {
      this.visible3 = true;
      this.OtherHelpList2 = content;
    },

    addList() {
      getAction("main/mainData").then((success) => {
        // console.log(success);
        this.goodsSum = success.data.data.goodsSum;
        this.wechatTodayOpenSum = success.data.data.wechatTodayOpenSum;
        this.todayBrowseTotal = success.data.data.todayBrowseTotal;
        this.todayCollectTotal = success.data.data.todayCollectTotal;
        this.list = success.data.data.collectRanking;

        this.NoticeList = success.data.data.noticeList;
        this.UsingHelpList = success.data.data.usingHelpList;
        this.OtherHelpList = success.data.data.otherHelpList;

        this.FileDownloadList = success.data.data.fileDownloadList;
        // console.log(this.NoticeList);
        let MyChart = success.data.data.collectInWeek.collects;
        // console.log(this.myChart);
        for (let i = 0; i < MyChart.length; i++) {
          this.myChart.push(MyChart[i].createTime);
          this.myChartnum.push(MyChart[i].total);
        }
        let ChartDom = success.data.data.browseInMonths;
        for (let j = 0; j < ChartDom.length; j++) {
          this.chartDom2.push(ChartDom[j]);
          this.chartDom.push(ChartDom[j].goodsName);
          this.chartDomnum.push(ChartDom[j].total);
        }
        // console.log(this.chartDomnum);
        //产品总数
        this.sonNum = success.data.data.listMainDataPieChartRespVOSum;
        this.Cake8 = success.data.data.listMainDataPieChartRespVO;
        this.Cake2 = success.data.data.listMainDataPieChartRespVO;
        for (let k = 0; k < this.Cake2.length; k++) {
          this.tarket.push(this.Cake2[k].goodsTypeNum);
          this.Cake2[k]["value"] = this.Cake2[k]["goodsTypeNum"];
          this.Cake2[k]["name"] = this.Cake2[k]["goodsTypeName"];
          // this.Cake3[k][""]
          delete this.Cake2[k].goodsTypeNum;
          delete this.Cake2[k].goodsTypeName;
        }
        this.drawLine();
      });
    },
    //跳转路由至职位管理
    Jump_router() {
      this.$router.push("/business");
    },
    // 基于准备好的dom，初始化echarts实例
    // let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(document.getElementById("myChart"));
      let chartDom = this.$echarts.init(document.getElementById("myChart2"));
      let chartDom2 = this.$echarts.init(document.getElementById("myChart3"));
      let sonnum = this.sonNum;
      let target = this.tarket;
      let Cake8 = this.Cake8;

      let aww = this.chartDom2;
      // console.log(aww);
      // var option;s
      // 绘制图表
      //折线图
      // myChart.setOption({
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     // data: ["3.1", "3.2", "3.3", "3.4", "3.5", "3.6", "3.7"],
      //     data: this.myChart,
      //   },
      //   lineStyle: {
      //     color: "#79a3fa",
      //   },

      //   yAxis: {
      //     type: "value",

      //     axisLabel: {
      //       // formatter: function (value) {
      //       //   console.log(value);
      //       //   var texts = [];
      //       //   if (value == 0) {
      //       //     texts.push("0");
      //       //   } else if (value <= 300) {
      //       //     texts.push("1k");
      //       //   } else if (value <= 600) {
      //       //     texts.push("2k");
      //       //   } else if (value <= 900) {
      //       //     texts.push("3k");
      //       //   } else if (value <= 1200) {
      //       //     texts.push("4k");
      //       //   } else if (value <= 1500) {
      //       //     texts.push("5k");
      //       //   }
      //       //   return texts;
      //       // },
      //     },
      //   },
      //   series: [
      //     {
      //       data: this.myChartnum,
      //       symbolSize: 2,
      //       type: "line",
      //       markPoint: {
      //         data: [
      //           { type: "max", name: "最大值" },
      //           { type: "min", name: "最小值" },
      //         ],
      //       },
      //       areaStyle: {
      //         normal: {
      //           color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //             {
      //               offset: 0,
      //               // color: '#64B2ED'
      //               color: "rgba(221, 232, 254)",
      //             },
      //             {
      //               offset: 0.6,
      //               color: "rgba(239, 244, 255)",
      //               opacity: 0.1,
      //             },
      //             {
      //               offset: 1,
      //               color: "rgba(251, 253, 255,1)",
      //               opacity: 0.1,
      //             },
      //           ]),
      //         },
      //         // color: '#57c5f7',
      //         // opacity: 0.1
      //       },

      //       symbol: "none",
      //     },
      //   ],
      // });
      // console.log(this.chartDom);
      //柱形图
      chartDom.setOption({
        // legend: [
        //   {
        //     orient: "vertical",
        //     top: "24%",
        //     left: "10%",
        //     align: "left",
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     data: [{ name: 'null', icon: "circle" }],
        //   },
        // ],
        //      legend: {

        //          orient: "vertical",
        //       top: "21%",
        //       right: "30%",
        //       itemWidth: 10,
        //       itemHeight: 10,
        //    data: [
        //       {
        //         name:'条',
        //         icon: "circle"
        //         },
        //          {
        //         name:'框',
        //         icon: "circle"
        //         },
        //          {
        //         name:'123',
        //         icon: "circle"
        //         },
        //          {
        //         name:'456',
        //         icon: "circle"
        //         },
        //          {
        //         name:'789',
        //         icon: "../assets/白菜.png"
        //         },

        //    ],
        //     left: '10%'
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: {
                type: "line",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(239, 242, 249,0.2)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(239, 242, 249,0.2)", // 0% 处的颜色  #000613','#00334f', '#77f0ff'
                  },
                ],
              },
              type: "solid",
              width: 30,
            },
          },
        },
        grid: {
          left: "20%",
          right: "20%",
          bottom: "0%",
          // top: "20%",
          // left: "22%",
          // bottpm: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            // show: false,
            // icon: "circle" ,
            data: this.chartDom,
            yAxisIndex: 0,
            // splitLine:{show: false}
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            data: this.chartDomnum,
            inverse: true,
            // splitLine:{show: false}
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          // {
          //   name: "最大数量",
          //   type: "bar",
          //   yAxisIndex: 0,
          //   data: [1000, 1000, 1000,1000, 1000],
          //   //柱子之间的距离
          //   barCategoryGap: 50,
          //   //柱子的宽度
          //   barWidth: 10,
          //   barGap: "-100%",

          //   itemStyle: {
          //     color: "#f0f0f0",
          //     borderColor: "none",

          //     // borderWidth:3,
          //   },
          // },
          {
            name: this.chartDom,
            type: "bar",
            data: this.chartDomnum,

            //柱子之间的距离
            barCategoryGap: 40,
            //柱子的宽度
            barWidth: 10,
            itemStyle: {
              color: "#709df7",
              borderColor: "none",
            },
          },
        ],
      });
      //饼图
      chartDom2.setOption({
        // const sonNUm = this.sonNum,
        // title: {
        //   text: "菜品好评度排行",
        // },
        tooltip: {
          trigger: "item",
          show: true,
        },
        legend: {
          orient: "vertical",
          top: "30%",
          right: "10%",
          itemWidth: 10,
          itemHeight: 10,
          height: 200,
          // itemRadius:20,
          textStyle: {
            fontSize: "14",
          },
          data: this.Cake8,
          // data:this.sonNum,
          formatter: function (name) {
            // console.log(Cake8);
            let target = 0;
            for (let i = 0; i < Cake8.length; i++) {
              if (Cake8[i].name == name) {
                target = Cake8[i].value;
              }
            }
            // console.log(target);
            const p = [name + "\xa0\xa0\xa0" + target];
            //  + '{b|' + map[name] + '%}'
            return p;
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "65%"],
            center: ["35%", "54%"],
            avoidLabelOverlap: false,

            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                position: "center",
                formatter: function (argument) {
                  var html;
                  html = "总数\r\n\r\n" + sonnum;
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#000000",
                },
              },
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: "40",
              //   fontWeight: "bold",
              // },
            },
            labelLine: {
              show: false,
            },
            data: this.Cake2,
          },
        ],
      });
    },
  },
};
</script>
<style lang='scss' scoped>
// .news_content {
//   padding: 15px 15px 15px 15px;
// }
.Image {
  position: relative;
}
.Image2 {
  background-image: url("../assets/顶部背景.png");
  background-size: 100% 100%;
  //  width: 100%;
  margin-bottom: 16px;
  height:80px;
}
.news_content /deep/ .ant-card-body {
  display: flex;
  padding: 0 !important;
  width: 100%;

  min-width: 210px;
}
.Left {
  // width: 280px;
  // width: 60%;
  flex: 0.8;
  height: 64px;
  min-width: 72px;
  margin-top: 24px;
  margin-left: 24px;
  margin-bottom: 24px;
}
.Left div {
  font-weight: bold;
}
.Left span {
  font-weight: bold;
  font-size: 30px;
}
.Right_left {
  // width: 310px;
  flex-grow: 1;
  height: 64px;
  // margin-right: 100px;
  border-left: 2px solid #e8e8e8;
  margin-top: 24px;
}
.Right_left div {
  font-weight: bold;
  // margin-left: 38px;
}
.Right_left span {
  font-weight: bold;
  font-size: 30px;
  color: #ff7400;
  margin-left: 38px;
}

.Right_center {
  // width: 310px;
  // width: 150px;
  // margin-right: 100px;
  flex-grow: 1;
  height: 64px;
  margin-top: 24px;
}
.Right_center div {
  font-weight: bold;
  margin-left: 38px;
}
.Right_center span {
  font-weight: bold;
  font-size: 30px;
  color: #0091ff;
  margin-left: 38px;
}
.zongti {
  display: flex;
}
.Right_right {
  flex-grow: 1;
  height: 64px;
  margin-top: 24px;
}
.Right_right div {
  font-weight: bold;
  margin-left: 38px;
}
.Right_right span {
  font-weight: bold;
  font-size: 30px;
  color: #44d7b6;
  margin-left: 38px;
}
.Center_top {
  width: 100%;
}
.Center_center {
  height: 84px;
  // border-bottom: 2px solid #f1f1f1;
  margin-left: 24px;
}
.Center_center {
  // height: 84px;
  width: 100%;
}
.Bottom_5::after {
  width: 96%;
  height: 5px;
  display: flex;
  margin-left: 5px;
  border-bottom: 1px solid rgb(243, 243, 243);
}
.Center_top p {
  color: #000000;
  font-size: 16px;
  margin-left: 24px;
  // margin-top: 20px;
}
.Center_top .Span {
  font-weight: bold;
  font-size: 14px;
  // margin-bottom: 8px;
  margin-top: 8px;
  display: inline-block;
}
.Center_top .Span1 {
  font-size: 12px;
  // margin-bottom: 8px;
  margin-top: 8px;
  display: inline-block;
  width: 35px;
  background: #d04894;
  text-align: center;
  margin-right: 10px;
  color: #fff;
  line-height: 22px;
  border-radius: 4px;
}
.Center_top .Span2 {
  font-size: 12px;
  // margin-bottom: 8px;
  margin-top: 8px;
  display: inline-block;
  width: 35px;
  border: 1px solid red;
  text-align: center;
  margin-right: 10px;
  background: #fe9900;
  color: #fff;
  line-height: 22px;
  border-radius: 4px;
}
.Center {
  float: right;
  margin-top: -50px;
  margin-right: 24px;
}
.Bottom {
  cursor: pointer;
  height: 56px;
  text-align: center;
  line-height: 56px;
  background: rgba(0, 0, 0, 0.02);
}
.RIGHT {
  // width: 335px;
  flex: 1;
  max-width: 336px;
  min-width: 303px !important;
}
.RIGHT img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.Right_33 {
  margin-left: 24px;
}
.FLEX {
  flex: 2;
  margin-right: 14px;
}
.card_right p {
  font-size: 16px;
  font-weight: bold;
  margin-right: 150px;
  margin-bottom: 0;
  margin-top: 20px;
  margin-left: 24px;
}
.LOGO {
  display: flex;
  margin-top: 20px;
}
.guanli {
  width: 84px;
  height: 72px;
  margin-left: 48px;
}
.LOGO img {
  cursor: pointer;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  display: block;
}
.Notice p {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 20px;
  margin-left: 24px;
}
.right_88 {
  margin-top: -15px;
}
.right_99 {
  margin-top: -25px;
  margin-left: 24px;
}
.right_99_9 {
  margin-left: auto;
}
.right_99_9 span {
  padding-right: 24px;
}
.Notice {
  height: 64px;
  margin-bottom: 0px;
}
.Background {
  // line-height: 42px;
  width: 100px;
  color: #1890ff;
  cursor: pointer;
  // background: #f5f5f5;
  padding: 2px 8px;
  margin-right: 8px;
  margin-left: 17px;
}
.Background_88 {
  cursor: pointer;
  padding-right: 24px;
}
.ellipsis {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Add {
  margin-left: auto;
  margin-right: 7px;
}
.Right_bottom div {
  margin-bottom: 8px;
}
.Right_bottom {
  width: 100%;
}
hr {
  width: 280px;
  margin-top: 30px;
  color: #e8e8e8;
  // background: #e8e8e8
}
.Text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 15px;
  height: 64px;
}
.Text2 {
  // position: relative;
  font-size: 16px;
  // font-weight: bold;

  margin-top: 15px;
  margin-left: 24px;
}
.Right_bottom_2 div {
  margin-bottom: 24px;
  color: #1890ff;
  cursor: pointer;
}
.card_Height {
  overflow: hidden;
  // overflow-y: scroll;
}
.myChart3 {
  // float: right;
  // position: absolute;
  // right: 0;
  position: relative;
}
.Chart_top {
  height: 64px;
  line-height: 64px;
}
.Chart {
  height: 50px;
  font-size: 16px;
  color: #1890ff;
  font-weight: bold;
  margin-left: 24px;
  // margin-top: 20px;
  width: 73px;
  border-bottom: 2px solid;
}
.FontSize {
  position: absolute;
  left: 50px;
  top: 25px;
}
.FontSize .left_font {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 8px;
}
.left_bottom_font {
  color: #ffffff;
}
.FontSize a {
  color: #ffffff;
  text-decoration: revert;
  margin-left: 20px;
}
.news_content /deep/ .ant-card {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
}
.execel {
  height: 64px;
  // width: 120px;
  width: 85%;
  font-size: 16px;
  font-weight: bold;
  line-height: 64px;
  margin-left: 48px;
  display: flex;
}
.execel span {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
}
.Card_2 {
  position: relative;
}
.Card_2 .execel1 {
  position: absolute;
  top: 0;
  left: -15px;
  height: 64px;
  // width: 120px;
  width: 88%;
  font-size: 16px;
  font-weight: bold;
  line-height: 64px;
  margin-left: 48px;
  display: flex;
}
// .Card_2 .execel1 .SPan{
//   margin-left: auto;
//   display: inline-block;
// }
.execel1 span {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
}
.Width {
  height: 20px;
}
.execel2 {
  // margin-left: 575px !important;
  height: 64px;
  // width: 120px;
  width: 35%;
  font-size: 16px;
  font-weight: bold;
  line-height: 64px;
  margin-left: 10%;
  display: flex;
}
.execel2 span {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
}
.Right_left .ruidus {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ff7400;
  border-radius: 34px;
  margin-left: 22px;
  margin-right: 5px;
}
.Right_center .ruidus2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #0091ff;
  border-radius: 34px;
  margin-left: -11px;
  margin-right: 5px;
}
.Right_right .ruidus3 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #44d7b6;
  border-radius: 34px;
  margin-left: -11px;
  margin-right: 5px;
  // background: #f0f0f0;
}
#myChart2 {
  width: 100%;
}
.right_888 {
  cursor: pointer;
  display: flex;
}
.text_66 {
  color: #1890ff;
  margin-right: 45px;
}
.item_icon {
  width: 15px !important;
  height: 15px;
  margin-bottom: 6px;
  // margin-left: 30%;
}
.text_pp {
  display: flex;
}
.path {
  color: #1890ff;
  cursor: pointer;
  margin-bottom: 24px;
}
.Center_center2 {
  margin-right: 45px;
  // margin-bottom: 12px;
  // border:1px solid blue;
  border-bottom: 1px solid rgb(202, 194, 194);
  position: relative;
  // border: 1px solid blue;
}
.right_GG {
  display: flex;
  margin-bottom: 20px !important;
}
.right_GG_8 {
  margin-left: auto;
}
.Bottom_left {
  width: 100px;
  display: inline-block;
  margin-bottom: 5px;
  margin-top: 5px;
}
.Bottom_left1 {
  width: 110px;
  display: inline-block;
  margin-bottom: 5px;
  margin-top: 5px;
}
.Bottom_left2 {
  width: 150px;
  display: inline-block;
  margin-bottom: 5px;
  margin-top: 5px;
}
.gutter-example {
  margin-top: 16px;
}

.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
  padding: 5px 0;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.category {
  font-size: 16px;
  font-weight: 600;
}
.num {
  font-size: 24px;
  font-weight: 600;
}
.percentage {
  font-size: 12px;
}
.jump {
  position: absolute;
  height: 50px;
  width: 100%;
  left: 0px;
  bottom: 0px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
.yuan {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7f4fc;
  color: #2c8cf0;
}
.salary{
margin-left:30px;
font-size: 16px;
font-weight: 600;
color: #46ad6e;
}
.Bottom_left2{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Bottom_left1
.Bottom_left2{
  vertical-align: bottom;
}
</style>